<template>
  <div class="dashboard">
    <div class="dashboard-top">
      <img src="../../assets/dashboard-bg.jpg" width="100%" alt="">
      <div class="dashboard-top-main">
        <img class="dashboard-avatar" :src="userInfo.avatar" alt="">
        <span class="dashboard-name">{{userInfo.userAccount}}</span>
      </div>
    </div>
    <div class="dashboard-main dashboard-item">
      <div class="dashboard-list">
        <mt-cell>
          <b slot="title" class="cur-title">我的应用</b>
        </mt-cell>
        <div>
          <ul class="list-ui cur-flex">
            <li @click="linkToSite(item)" v-if="index<4" v-for="(item, index) in collectList" :key="index" class="list-li cur-flex cur-direction-column cur-align-center">
              <img :src="item.logo" class="list-img" alt="">
              <span class="cur-overflow list-content">{{item.siteName}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="dashboard-item">
      <div>
        <mt-cell>
          <b slot="title" class="cur-title">帐户安全</b>
        </mt-cell>
        <mt-cell @click.native="$router.push('/notice/index')">
          <div class="item-title" slot="title">
            <i class="item-icon icon iconfont icon-xiaoxi"></i>
            <span>消息中心</span>
          </div>
          <div class="item-right-icon" slot="icon">
            <i class="icon iconfont icon-gengduox"></i>
          </div>
        </mt-cell>
        <mt-cell @click.native="$router.push('/myStars')">
          <div class="item-title" slot="title">
            <i class="item-icon icon iconfont icon-wodeshoucangx"></i>
            <span>我的收藏</span>
          </div>
          <div class="item-right-icon" slot="icon">
            <i class="icon iconfont icon-gengduox"></i>
          </div>
        </mt-cell>
      </div>
    </div>
    <div class="dashboard-item">
      <mt-cell @click.native="$router.push('/set/index')">
        <div class="item-title" slot="title">
          <i class="item-icon icon iconfont icon-shezhi3"></i>
          <span>设置</span>
        </div>
        <div class="item-right-icon" slot="icon">
          <i class="icon iconfont icon-gengduox"></i>
        </div>
      </mt-cell>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
// import * as api from '@/service/api'
export default {
  title: '个人中心',
  components: {
    // Button
  },
  data () {
    return {
      loading: false
    }
  },
  created () {
    // this.getUserFoot()
  },
  computed: {
    ...mapState({
      userInfo: state => state.me.user || {},
      collectList: state => state.me.collectList
    })
  },
  methods: {
    linkToSite (item) {
      window.location.href = item.ipAdd
    }
  }
}
</script>
<style lang="scss">
.dashboard {
  position: relative;
  &-top-main {
    position: absolute;
    top: 66px;
    height: 130px;
    padding: 0 32px;
    span {
      line-height: 130px;
      padding-left: 24px;
      font-size: 34px;
      color: $white;
      font-weight: 500;
    }
  }
  .item-title {
    font-size: 26px;
  }
  &-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: inline-block;
    // background-color: #ccc;
  }
  &-item {
    margin-top: 16px;
  }
  &-main {
    background-color: $white;
    .list-img {
      width: 86px;
      height: 86px;
      display: inline-block;
      border-radius: 50%;
      border: 1px solid $gray;
    }
    .list-name {
      font-size: 20px;
      color: $text-color;
    }
    .list-ui {
      padding: 0 50px 32px;
    }
    .list-li {
      width: 120px;
      // margin-right: 46px;
      // padding: 0 23px;
      text-align: center;
      // box-sizing: content-box;
      // text-align: center;
    }
    .list-content{
      display: inline-block;
      width: 120px;
      text-align: center;
    }
  }
  .item-icon.icon-xiaoxi {
    font-size: 36px;
    vertical-align: -3px;
  }
  .item-icon {
    font-size: 48px;
    color: $red;
    vertical-align: -4px;
    padding-right: 20px;
  }
  .item-right-icon {
    position: absolute;
    right: 26px;
    vertical-align: -4px;
    color: $text-color;
  }
}
</style>
